<template>
    <div class="item">
        <!-- 
            注释：
                el-row 代表行
                el-col 代表列
                一行被分成24份，  ：span='x'代表 当前列el-col 占了x份；
                                 ：offset='x' 代表当前列向右移了x份；
                如果 el-col 不设置 span 则默认时占了24份。
         -->
        <el-row>
            <el-col :span="2" :offset="3">
                <el-checkbox v-model="isCheck "></el-checkbox>
            </el-col>
            <el-col :span="6" :offset="3">
                {{ item.tittle }}
            </el-col>
            <el-col :span="4" :offset="3">
                <el-button type="danger" @click="delItem">删除</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts">
import { defineComponent,computed } from 'vue'


export default defineComponent({
    props:['item','index','del','changeFlag'],
    setup (props) {
        //删除元素
        const delItem = ()=>{
            // console.log(props)  proxy 对象
            //思路：将删除元素的方法 del 通过 props，一路传值，传到item组件中，在这里调用 app组件上的方法。
            props.del(props.index);
        }
        //设置计算属性
        const isCheck = computed({
            get(){
                return props.item.flag
            },
            set(value){
                console.log(value)
                //将todolist数组中对应该项的todo对象中的flag改为true
                props.changeFlag(props.item,value)
            }
        })
        return {
            delItem,
            isCheck 
        }
    }
})
</script>

<style lang="scss">
.item{
    margin-bottom: 10px;
}
</style>